<template>
    <view class="margin_bottom_80">
        <!--  :scrollTop="scrollTop"
                 type="transparentFixed"
                 transparentFixedFontColor="#FFF" -->
        <view>
            <!-- <nav-bar fontColor="#fff">
            </nav-bar> -->
            <view class="padding_box">
                <view class="container_box u-flex-col ">
                    <view class="title">已报课程</view>
                    <view class="u-flex">
                        <image class="order_img"
                               :src="orderData.pic"
                               mode="" />
                        <view class="right_box">
                            <view class="order_title">{{ orderData.name }}</view>
                            <view class="order_tuition u-flex u-row-between">
                                <span>上课时间：</span>
                                <view style="flex:1;"
                                      class="u-flex-col ">
                                    <view class="u-flex u-row-between">
                                        <view style="width:50%;text-align: center;"
                                              v-for="(item,index) in orderData.weekStr"
                                              :key="index">{{ item }}</view>
                                    </view>
                                    <view class="u-flex u-row-between">
                                        <view v-for="(item,index) in orderData.schoolTimeStr"
                                              :key="index">{{ item }}</view>
                                    </view>

                                </view>
                                <!-- <span>{{ orderData.weekStr[0] + orderData.schoolTimeStr[0] }}</span>
                                <span>{{ orderData.weekStr[1] + orderData.schoolTimeStr[1] }}</span> -->
                            </view>
                            <view class="order_tuition u-flex u-row-between">
                                <span>价格：</span>
                                <span class=" price2">{{ orderData.priceDouble }}</span>
                            </view>
                            <view class=" u-flex-col">
                                <view class="order_material u-flex u-row-between"
                                      v-for="(item,index) in spData"
                                      :key="index">
                                    <span>{{ orderData.specialSpec[index].name }}： </span>
                                    <span>{{ item.value }}</span>
                                </view>
                            </view>

                        </view>
                    </view>
                </view>
                <view class="container_box u-flex-col ">
                    <view class="title">订单备注</view>
                    <u-input v-model="notes"
                             type="text"
                             border="border"
                             placeholder="如需要，请输入订单备注" />
                </view>
            </view>
        </view>
        <view style="height: 1px;"></view>
        <view class="footer_box safe-area-inset-bottom u-flex u-row-between">
            <view>
                <span>实付款：</span>
                <span class="price">￥{{ orderData.priceDouble }}</span>
            </view>
            <u-button @click="orderPay"
                      type="primary"
                      :custom-style="customStyle"
                      :ripple="true"
                      shape="circle"> 立即支付 </u-button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            scrollTop: 0,
            customStyle: {
                width: '200rpx',
                height: '80rpx',
                background: 'linear-gradient(154deg, #7CC3F2 0%, #2979FF 100%)',
                borderRadius: '40rpx',
            },
            spData: {},
            notes: '',
            orderData: {},
        }
    },
    onLoad(option) {
        this.orderData = option.orderData && JSON.parse(option.orderData)
        this.spData = this.orderData && JSON.parse(this.orderData.spData)
        console.log('>>>>>>>>>>>>>>>>', this.orderData)
    },
    methods: {
        orderPay() {
            let currentChildren = uni.getStorageSync('currentChildren')
            let data = {
                goods: [
                    {
                        childId: currentChildren.childrenId,
                        classSchduleId: this.orderData.classSchduleId,
                        skuId: this.orderData.id,
                        quantity: 1,
                    }
                ],
                appId: this.$appId,
                payWay: 201,
                notes: this.notes,
            }
            let _this = this
            this.$api.submitPayOrder(data, res => {
                if (res.code == 0) {
                    uni.requestPayment({
                        timeStamp: res.data.wxMpPayInfo.timeStamp + '',
                        nonceStr: res.data.wxMpPayInfo.nonceStr,
                        package: res.data.wxMpPayInfo.packageValue,
                        paySign: res.data.wxMpPayInfo.paySign,
                        signType: res.data.wxMpPayInfo.signType,
                        success(result) {
                            console.log('>>>>>>>>>>>>>>>>>>>orderId', res.data.orderId)
                            _this.$interactive.toast('支付成功')
                            setTimeout(() => {
                                uni.redirectTo({
                                    url: '/pages/orderDetails/orderDetails?orderId=' + res.data.orderId + '&type=submitOrder'
                                });
                            }, 500);
                        },
                        fail(res) {
                            if (res.errMsg !== 'requestPayment:fail cancel') {
                                _this.$interactive.toast('微信支付失败，请联系客服处理')
                            }
                            console.error('支付失败', res)
                        },
                        complete(res) {
                            console.error('支付完成', res)
                        }
                    })
                }
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.padding_box {
    padding: 30rpx;
}
.container_box {
    padding: 30rpx;
    border-radius: 32rpx;
    background-color: #fff;
}
.container_box + .container_box {
    margin-top: 15rpx;
}
.title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
}
.order_img {
    width: 140rpx;
    height: 140rpx;
    margin-right: 40rpx;
    border-radius: 16rpx;
}
.right_box {
    flex: 1;
}
.order_title {
    margin-bottom: 15rpx;
    color: #333;
    font-weight: bold;
}
.order_tuition {
    margin: 7rpx 0;
}
.order_tuition,
.order_material {
    color: #999;
    font-size: 24rpx;
    font-weight: 500;
}
.margin_bottom_80 {
    margin-bottom: 50rpx;
}

.price {
    color: #eb4b4b;
    font-size: 48rpx;
    font-weight: bold;
}
.price2 {
    color: #eb4b4b;
    font-size: 32rpx;
    font-weight: bold;
}
.float_right {
    float: right;
}
</style>
